<template>
  <div class="h-100p bg-fff bdr-10 detail">
    <div class="detail-container">
      <v-bill-detail-page :bill="currentBillDetail" :billInfo="billInfo">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
          <v-form-title title="调价信息"/>
          <div class="container">
            <div class="offer">
              <p class="t">报价信息</p>
              <p class="info"><span>约合每十万扣款</span><b>{{currentBillDetail.billEveryDeduction}}</b></p>
              <p class="info"><span>年化率</span><b>{{currentBillDetail.annualInterestRate}}%</b></p>
              <p class="info"><span>贴息额</span><b>{{currentBillDetail.discountAmount}}</b></p>
              <p class="info"><span>转让额</span><b>{{currentBillDetail.transferAmount}}</b></p>
            </div>
            <div class="adj">
              <p class="t">掌柜调价</p>
              <el-select v-model="isEvery" size="small" @change="resetInput">
                <el-option :value="1" label="每十万"></el-option>
                <el-option :value="2" label="年化率"></el-option>
              </el-select>
              <p class="info" v-if="isEvery === 2">
                <el-form-item prop="adjustInterestRate" label="年化率+" class="has-unit">
                  <el-input v-model="form.adjustInterestRate" @input="calc(false)"
                            class="line-input"></el-input>
                  <span class="unit">%</span>
                </el-form-item>
              </p>
              <p class="info" v-else>
                <el-form-item prop="everyPlus" label="每十万加+" class="has-unit">
                  <el-input v-model="form.everyPlus" @input="calc(true)"
                            class="line-input"></el-input>
                  <span class="unit">元</span>
                </el-form-item>
              </p>
            </div>
            <div class="res">
              <p class="t">调价信息</p>
              <p class="info"><span>约合每十万扣款</span><b>{{res.billEveryDeduction}}</b></p>
              <p class="info"><span>年化率</span><b>{{res.interestYear}}%</b></p>
              <p class="info"><span>贴息额</span><b>{{res.discountAmount}}</b></p>
              <p class="info"><span>转让额</span><b>{{res.transferAmount}}</b></p>
              <p class="info"><span>掌柜预期利润</span><b>{{res.treasurerExpectedProfit}}</b></p>
            </div>
          </div>
          <div style="text-align: center; padding-bottom: 20px;">
            <el-button type="primary" @click="checkAdj">调价</el-button>
          </div>
        </el-form>

      </v-bill-detail-page>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vBillDetailPage from '@/components/bill-detail-page'
  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vBillDetailPage, vFormTitle
    }
  })
  export default class Transaction extends Vue {
    id = ''
    currentBillDetail = {}
    isEvery = 1
    billInfo = {}

    getBillDetailByInquiryId () {
      return this.$axios.get(`b/boms/inquiry/${this.id}`)
    }

    getBIllDetailByQuoteId () {
      return this.$axios.post('b/boms/bill/detail', {
        billId: this.$route.query.billId,
        billQuoteId: this.$route.query.quoteId
      })
    }

    async getBillDetail (isQuote) {
      let res: AjaxResponse = isQuote ? (await this.getBIllDetailByQuoteId()) : (await this.getBillDetailByInquiryId())
      if (res.responseCode === 200) {
        this.currentBillDetail = res.data
        this.billInfo = res.data.userHierarchiesDto
      }
    }

    form = {
      everyPlus: '',
      adjustInterestRate: ''
    }
    rules = {
      everyPlus: [{ validator: this.testAdj, trigger: 'none' }],
      adjustInterestRate: [{ validator: this.testAdj, trigger: 'none' }]
    }
    res = {
      interestYear: '',
      transferAmount: '',
      billEveryDeduction: '',
      treasurerExpectedProfit: '',
      discountAmount: ''
    }

    testAdj (rule, value, cb) {
      if (this.form.adjustInterestRate === '' && this.form.everyPlus === '') {
        cb(new Error('请输入调价基数'))
        return
      }
      cb()
    }

    getResByAdjInterestRate () {
      return this.$axios.post('g/gateway/calculator/calculate', {
        interestRate: this.currentBillDetail.annualInterestRate,
        adjustInterestRate: this.form.adjustInterestRate, //
        faceValue: this.currentBillDetail.faceValue, //
        expiryDate: +new Date(this.currentBillDetail.expiryDate), //
        adjustDay: this.currentBillDetail.billType === 0 ? 0 : 3,
        transferAmount: this.currentBillDetail.transferAmount,
        billEveryDeduction: this.currentBillDetail.billEveryDeduction,
        biddingMethod: this.currentBillDetail.biddingMethod
      })
    }

    getResByEveryPlus () {
      return this.$axios.post('g/gateway/calculator/everyplus', {
        everyPlus: this.form.everyPlus,
        faceValue: this.currentBillDetail.faceValue,
        expiryDate: +new Date(this.currentBillDetail.expiryDate),
        adjustDay: this.currentBillDetail.billType === 0 ? 0 : 3,
        transferAmount: this.currentBillDetail.transferAmount,
        billEveryDeduction: this.currentBillDetail.billEveryDeduction,
        // interestRate: this.currentBillDetail.annualInterestRate,
        biddingMethod: this.currentBillDetail.biddingMethod
      })
    }

    async calc (isEveryPlus) {
      let res = await (isEveryPlus ? this.getResByEveryPlus() : this.getResByAdjInterestRate())
      if (isEveryPlus) {
        this.form.adjustInterestRate = res.data.adjustInterestRate
      } else {
        this.form.everyPlus = res.data.everyPlus
      }
      this.res = res.data
    }

    checkAdj () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.publishAdj(this.form, this.res)
        }
      })
    }

    publishAdj (form, res) {
      if (this.currentBillDetail.biddingMethod === 0) {
        this.publishAdjByPrice(form, res)
      } else {
        this.publishAdjByQuote(form, res)
      }
    }

    async publishAdjByPrice (form, result) {
      /// 一口价
      let f = {
        inquiryInformationId: this.currentBillDetail.id,
        billQuoteId: '', //
        priceAdjustMethod: 0, //
        adjustmentInterestRate: form.adjustInterestRate, //
        adjustmentEveryPlus: form.everyPlus, //
        adjustmentDiscountAmount: result.discountAmount, //
        adjustmentTransferAmount: result.transferAmount, //
        treasurerExpectedProfit: result.treasurerExpectedProfit,
        adjustYearRate: result.interestYear,
        billEveryDeduction: result.billEveryDeduction
      }
      if (this.isEvery === 1) {
        delete f.adjustYearRate
      } else {
        delete f.billEveryDeduction
      }
      let res: AjaxResponse = await this.$axios.post('b/boms/inquiry/adjustmentprice', f)

      this.$utils.tips(res)
      this.$router.back()
    }

    async publishAdjByQuote (form, result) {
      let f = {
        inquiryInformationId: this.currentBillDetail.id,
        billQuoteId: this.$route.query.quoteId, //
        priceAdjustMethod: 0, //
        adjustmentInterestRate: form.adjustInterestRate, //
        adjustmentEveryPlus: form.everyPlus, //
        adjustmentDiscountAmount: result.discountAmount, //
        adjustmentTransferAmount: result.transferAmount, //
        treasurerExpectedProfit: result.treasurerExpectedProfit,
        adjustYearRate: result.interestYear,
        billEveryDeduction: result.billEveryDeduction
      }
      if (this.isEvery === 1) {
        delete f.adjustYearRate
      } else {
        delete f.billEveryDeduction
      }
      let res: AjaxResponse = await this.$axios.post('b/boms/inquiry/adjustmentbidding', f)
      this.$utils.tips(res)
      this.$router.back()
    }

    resetInput () {
      this.form.adjustInterestRate = ''
      this.form.everyPlus = ''
    }

    mounted () {
      this.id = this.$route.params.id

      this.getBillDetail(!!this.$route.query.quoteId)

    }
  }
</script>

<style lang="less" scoped>
  .detail {
    overflow-y: scroll;
    padding-top: 40px;
  }

  .detail-container {
    width: 1180px;
    margin: 0 auto;
  }

  .container {
    display: flex;
    width: 80%;
    margin: 0 auto;
    > div {
      flex: 1;
    }
    .t {
      color: #409EFF;
      line-height: 30px;
    }
    .info {
      line-height: 24px;
      span {
        color: #666666;
        margin-right: 24px;
      }
      b {
        color: #333;
      }
    }
  }

  .el-input {
    width: 100px !important;
    flex: 1;
  }

  .has-unit {
    position: relative;
    .unit {
      position: absolute;
      top: 0;
      left: 60px;
      color: #333;
    }
  }
</style>
